<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./js/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myAppController"> 

<h3>自定义指令</h3>
<sheng></sheng> <!-- 第一种展示方式 -->

<h3>模板 - 引入外部文件</h3>
<div shi=""></div> <!-- 第二种展示方式 -->

<h3>模板 - script标签</h3>
<qu></qu>
<script id="qu" type="text/ng-template">script标签模板</script>
</body>
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.directive("sheng",function(){
	return {
		template:"<h1>你好</h1>"
	};
});
myApp.directive("shi",function(){
	return {
		templateUrl:"page/template.html" // 使用这种必须要在服务器上测试
	};
});
myApp.directive("qu",function(){
	return {
		templateUrl:"qu"
	};
});
myApp.controller('myAppController',['$scope',function($scope){

}]);
</script>
</html>